<template>
    <div class="real_time_event">
        <div class="real_time_event_content">
            <p class="real_time_title">实时状态  <span class="close" @click="closeModal(3)"></span></p>
            <ul class="real_time_item">
                <li><span>实体</span><span>状态名称</span><span>关注度</span></li>
                <li v-for="(item,index) in realTimeStatus" :style="{background: index % 2 === 0 ? '#4c4b50': '#2d2e32'}">
                    <span><a>{{item.item}}</a></span>

                    <span>{{item.name}}</span>

                    <span v-if="item.status === '正常'" style="color: #10d904">{{item.status}}</span>
                    <span v-if="item.status === '故障'" style="color: #df6e08">{{item.status}}</span>
                    <span v-if="item.status === '警报'" style="color: #f10102">{{item.status}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "real-time-status",
        components: {},
        props: ['realTimeStatus', 'closeModal'],
        data() {
            return {}
        },
        mounted() {

        },
        methods: {
            toDetail() {
                window.open(window.location.href + 'detail_message');
            }
        }
    }
</script>

<style lang="less" type="text/less" scoped>
    @import "realTimeStatus";
</style>